<template>
  <div>
    <div :class="['mt-[10px] s4k:mt-[20px] h-[85vh]', 'parent' + parent]">
      <!-- <draggable v-model="gridData" group="people" @start="drag = true" @end="drag = false" item-key="id" :class="[' h-[85vh] mt-[10px] s4k:mt-[20px]', 'parent' + parent]"
      >
        <template #item="{ element }">
          <div style="background-color: #1f2a37;display: inline-block;" draggable="true" ref="gridMain" :class="[
        `${!element.site ? 'selectBox1 bg-[#1F2A37]' : ''
        } cursor-pointer rounded-[16px] relative box div`,
      ] + element.id
      "  @mouseleave="handleMouseLeave(element.id)"
            @mouseenter="handleMouseEnter(element.id)">
            <div class="absolute top-0 left-0 w-full h-full rounded-[16px]" @click="openDrawer">
              <svg-icon name="add" :width="addWidth" :height="addHeight" :class="[
      'svgGrid cursor-pointer absolute top-[45%] left-[47%] transform -translate-y-1/2 -translate-x-1/2',
      { svgAdd: selectGrid == element.id },
    ]"></svg-icon>
              <video v-if="element.site" class="absolute top-0 left-0 w-full h-full z-[100] rounded-[16px] bg-black"
                :poster="coverImg" :controls="false" ref="videoRef" style="border: solid boue"
                @mouseenter="videoMouseEnter(element.id)">
                <source src="@/assets/api.mp4" type="video/mp4" />
                Your browser does not support the video tag.
              </video>
            </div>
            <div v-if="element.desc == 'small'">
              <svg-icon v-if="videoShow != element.id && element.site" name="bofang" :width="recw" :height="rech"
                class="svgGrid absolute top-[4%] left-[2%] w-[10%] h-[10%] z-[200]"></svg-icon>
            </div>
            <svg-icon v-else-if="element.site" name="bofang" :width="recw" :height="rech"
              class="svgGrid absolute top-[4%] left-[2%] w-[10%] h-[10%] z-[200]"></svg-icon>
            <div class="absolute bottom-[3%] left-[2%] flex flex-col justify-start gridData-start text-white z-[200]"
              v-show="element.desc != 'small'">
              <span class="text-md font-semibold s4k:text-[28px]"
                :style="{ fontSize: IDsize, visibility: 'hidden' }">Camera ID</span>
              <span v-show="element.site" :class="[
      'w-[80%] text-md font-semibold s4k:text-[28px] text-[#e6e6e6] pl-[6%] py-[1%] live3d rounded-[4px]',
      { live3dhover: videoShow == element.id },
    ]" :style="{ fontSize: IDsize }">LIVE 3D</span>
              <span v-show="videoShow == element.id" class="w-[100%] text-md font-semibold pl-[6%] s4k:text-[28px]"
                :style="{ fontSize: IDsize }">Camera ID</span>
              <span v-show="videoShow == element.id" class="text-sm font-normal pl-[6%] s4k:text-[24px]"
                :style="{ fontSize: Losize }">Location</span>
            </div>
            <img v-if="element.site" class="absolute top-0 left-0 w-full h-full z-[100] rounded-[16px] bg-black"
              :src="'https://picsum.photos/400/200?'+element.id" alt="" @mouseenter="videoMouseEnter(element.id)" />
            <div v-html="gridHtml" v-if="element.site"></div>
            <div v-show="videoShow == element.id" @mouseleave="videoMouseLeave(element.id)" :class="[
      'videoMouseLeave absolute top-0 left-0 w-full h-full rounded-[16px] bgGrid cursor-default',
      { jtbgGrid: wabeiBg },
    ]">
              <svg-icon name="close" :width="closeSize" :height="closeSize"
                class="svgLogo cursor-pointer absolute right-[2.5%] top-[7%]"></svg-icon>
              <div class="absolute top-[6%] left-[2.8%] flex flex-col justify-start gridData-start text-white z-[999]"
                v-show="videoShow == element.id && element.desc == 'small'">
                <span class="text-md font-semibold s4k:text-[28px]" :style="{ fontSize: IDsize }">Camera ID</span>
                <span class="text-sm font-normal s4k:text-[24px]" :style="{ fontSize: Losize }">Location</span>
              </div>
              <div :class="[
      'flex flex-row justify-center items-center gridData-center absolute bottom-[3%] right-[2.5%]',
      { minLayout: element.desc == 'small' },
    ]">
                <svg-icon name="box" :width="boxSize" :height="boxSize"
                  class="svgLogo cursor-pointer mr-[5%]"></svg-icon>
                <svg-icon name="wabei" :width="wabeiSize" :height="wabeiSize"
                  class="wabeiPlay svgLogo cursor-pointer mx-[5%]" @click="wabeiPlay"></svg-icon>
                <svg-icon name="camera_m" :width="camera_m_w" :height="camera_m_h"
                  class="svgLogo cursor-pointer mx-[5%]"></svg-icon>
                <svg-icon name="full" :width="fullSize" :height="fullSize" class="svgLogo cursor-pointer ml-[5%]"
                  @click="Fullplay"></svg-icon>
              </div>
            </div>
          </div>
        </template>
</draggable> -->
      <div :style="{backgroundColor: clickIndex == v.id?'#233876':'var(--layout-progress-bg)', border: clickIndex == v.id?'solid #3f83f8 2px':''}" ref="gridMain" :class="[
      `${!v.imgUrl ? 'selectBox1 bg-[#1F2A37]' : ''
      } cursor-pointer rounded-[16px] border border-solid border-[var(--grid)] relative box div`,
    ] + v.id
      " v-for="v in gridData" :key="v.id" @mouseleave="handleMouseLeave(v.id)" @mouseenter="handleMouseEnter(v.id)"
      draggable="true"
        @dragstart="handleDragStart($event, v)"
        @dragover.prevent="handleDragOver($event, v)"
        @dragenter="handleDragEnter($event, v)"
        @dragend="handleDragEnd($event, v)"
        @click="handleClick(v)">
        <div class="absolute top-0 left-0 w-full h-full rounded-[16px]" @click="openDrawer">
          <svg-icon name="add" :width="addWidth" :height="addHeight" :class="[
      'svgGrid cursor-pointer absolute top-[50%] left-[50%] transform -translate-y-1/2 -translate-x-1/2',
      { svgAdd: selectGrid == v.id, svgAdd: clickIndex == v.id},
    ]"></svg-icon>
          <!-- <video v-if="v.imgUrl" class="absolute top-0 left-0 w-full h-full z-[100] rounded-[16px] bg-black"
            :poster="coverImg" :controls="false" ref="videoRef" style="border: solid boue"
            @mouseenter="videoMouseEnter(v.id)">
            <source src="@/assets/api.mp4" type="video/mp4" />
            Your browser does not support the video tag.
          </video> -->
        </div>
        <div v-if="v.desc == 'small'">
          <svg-icon v-if="videoShow != v.id && v.imgUrl" name="bofang" :width="recw" :height="rech"
            class="svgGrid absolute top-[4%] left-[2%] w-[10%] h-[10%] z-[200]"></svg-icon>
            <span v-show="v.imgUrl" :class="[
            'absolute bottom-0 left-0 z-[999] w-[80%] text-md font-semibold s4k:text-[28px] text-[#d6d5d5] pl-[6%] py-[3%] live3d rounded-[4px]',
          ]" :style="{ fontSize: IDsize, display: videoShow == v.id?'none':'block'}">LIVE 3D</span>
        </div>
        <svg-icon v-else-if="v.imgUrl" name="bofang" :width="recw" :height="rech"
          class="svgGrid absolute top-[4%] left-[2%] w-[10%] h-[10%] z-[200]"></svg-icon>
        <div class="absolute bottom-[3%] left-[2%] flex flex-col justify-start gridData-start text-white z-[200] s4k:left-[4%] s4klive3d"
          v-show="v.desc != 'small'">
          <span class="text-md font-semibold s4k:text-[28px]" :style="{ fontSize: IDsize, visibility: 'hidden' }">Camera
            ID</span>
          <span v-show="v.imgUrl" :class="['s4ktext',
      'z-[999] w-[80%] text-md font-semibold s4k:text-[28px] text-[#d6d5d5] pl-[6%] py-[3%] live3d rounded-[4px]',
      { live3dhover: videoShow == v.id },
    ]" :style="{ fontSize: IDsize}">LIVE 3D</span>
          <span v-show="videoShow == v.id" class="s4ktext w-[100%] text-md font-semibold my-[2px] pl-[6%] s4k:text-[28px]"
            :style="{ fontSize: IDsize }">Camera ID</span>
          <span v-show="videoShow == v.id" class="s4ktext text-sm font-normal pl-[6%] s4k:text-[24px]"
            :style="{ fontSize: Losize }">Location</span>
        </div>
        <img v-if="v.imgUrl" class="absolute top-0 left-0 w-full h-full z-[100] rounded-[16px] bg-black"
          :src="v.imgUrl" alt="" @mouseenter="videoMouseEnter(v.id)" />
        <div v-html="gridHtml" v-if="v.imgUrl"></div>
        <div v-show="videoShow == v.id" @mouseleave="videoMouseLeave(v.id)" :class="[
          'videoMouseLeave absolute top-0 left-0 w-full h-full rounded-[16px] bgGrid cursor-default',
          { jtbgGrid: wabeiBg },
        ]">
          <svg-icon name="close" :width="closeSize" :height="closeSize"
            class="svgLogo cursor-pointer absolute right-[2.5%] top-[5%]"></svg-icon>
          <div class="absolute top-[6%] left-[2.8%] flex flex-col justify-start gridData-start text-white z-[999] s4k:left-[6%] s4klive3d s4klive3dsmall"
            v-show="videoShow == v.id && v.desc == 'small'">
            <span class="s4ktext text-md font-semibold s4k:text-[28px]" :style="{ fontSize: IDsize }">Camera ID</span>
            <span class="s4ktext text-sm font-normal s4k:text-[24px]" :style="{ fontSize: Losize }">Location</span>
          </div>
          <div :class="[
            'w-full flex flex-row justify-end items-center gridData-center absolute bottom-[2%] right-[2.5%]',
            { minLayout: v.desc == 'small' },
          ]">
            <svg-icon name="3drotate" :width="wabeiSize" :height="wabeiSize" class="s4ksvg svgLogo cursor-pointer mr-[10px] s4k:mr-[25px]"></svg-icon>
            <svg-icon name="box" :width="boxSize" :height="wabeiSize" class="s4ksvg svgLogo cursor-pointer mx-[10px] s4k:mx-[25px]"></svg-icon>
            <svg-icon name="wabei" :width="wabeiSize" :height="wabeiSize"
              class="s4ksvg wabeiPlay svgLogo cursor-pointer mx-[10px] s4k:mx-[25px]" @click="wabeiPlay(v)"></svg-icon>
            <svg-icon v-if="camera_mShow" name="camera_m" :width="camera_m_w" :height="camera_m_h"
              class="s4ksvg svgLogo cursor-pointer mx-[10px] s4k:mx-[25px]" @click="camera_mShow = !camera_mShow"></svg-icon>
            <svg-icon v-else name="camera_m2" :width="camera_m_w" :height="camera_m_h"
              class="s4ksvg svgLogo cursor-pointer mx-[10px] s4k:mx-[25px]" @click="camera_mShow = !camera_mShow"></svg-icon>
            <svg-icon name="full" :width="fullSize" :height="fullSize" class="s4ksvg svgLogo cursor-pointer ml-[15px]"
              @click="Fullplay"></svg-icon>
          </div>
        </div>
      </div>
    </div>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" class="relative">
      <div class="w-full flex flex-row justify-between items-center gridData-center">
        <span class="text-[1.67rem] font-bold text-[var(--theme-font-color)]">Select a Camera</span>
        <img src="@/assets/image/close.png" alt="" class="w-[12px] h-[12px] cursor-pointer s2k:w-[16px] s2k:h-[16px] s4k:w-[24px] s4k:h-[24px] s4k:mr-[10px]"
          @click="drawer = false" />
      </div>
      <div class="w-full flex flex-row justify-between gridData-center h-[37px] mt-[20px] s4k:h-[74px] s4k:mt-[40px] s2k:h-[49.3px] s2k:mt-[26.6px]">
        <fwb-input v-model="searchCamera" placeholder="Search" id="searchCamera" style="width: 100%">
          <template #prefix>
            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400 s2k:w-7 s2k:h-7 s4k:w-10 s4k:h-10" fill="none"
              stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"
                stroke-width="2" />
            </svg>
          </template>
        </fwb-input>
        <button
          class="w-[90px] h-[38px] bg-[#1A56DB] text-white border-solid rounded-r-md border-[#1A56DB] border-[1px] cursor-pointer text-[1.13rem] s4k:w-[180px] s4k:h-[76px] s2k:w-[120px] s2k:h-[50.6px] s2k:rounded-r-[8px]">
          Search
        </button>
      </div>
      <div class="w-full h-[1px] bg-[var(--grid)] absolute left-0 mt-[12px] s2k:mt-[16px]"></div>
      <div class="w-full h-[50px] absolute left-0 mt-[12px] text-[#9CA3AF] font-Medium flex flex-row justify-between items-center s4k:h-[100px] s2k:h-[66.7px] s2k:mt-[16px]" style="border-bottom: 1px solid var(--grid)">
        <span class="ml-[5%] text-[1.13rem]">Select 9 more cameras</span>
        <div class="mr-[5%] w-[83px] h-[26px] flex border border-[var(--grid)] border-solid bg-[var(--layout-progress-bg)] rounded s4k:w-[166px] s4k:h-[52px] s2k:w-[106.6px] s2k:h-[34.6px] s2k:rounded-[5.3px]"><span class="m-auto text-[1rem] cursor-pointer">Auto Select</span></div>
      </div>
      <div class="list absolute w-full h-[calc(100vh_-_170px)] bottom-0 left-0 s4k:h-[calc(100vh_-_320px)] s2k:h-[calc(100vh_-_226px)]">
        <el-collapse v-model="activeNames" v-for="v in 3" :key="v">
          <el-collapse-item title="Building 123" name="1">
            <el-collapse v-model="activeNames2">
              <el-collapse-item title="level" name="1">
                <div class="relative flex flex-row justify-between gridData-center hover:bg-[var(--hoverBg)] cursor-pointer h-[40px] s2k:h-[53.3px] s4k:h-[80px]"
                  v-for="v in cameraList" :key="v.id">
                  <div :class="['w-[3px] h-full absolute left-0', { 'bg-[var(--borderBottom)]': v.num > 0 }]"></div>
                  <div class="flex flex-col justify-center items-start gridData-start my-[8px] ml-[20px] s4k:my-[16px] s4k:ml-[40px] s2k:my-[10.6px] s2k:ml-[26.6px]">
                    <span class="text-[1.16rem] text-[var(--theme-font-color)] font-SemiBold">{{v.name}}</span>
                    <span class="text-[1rem] text-gray-500 font-Medium mt-[-10px]">{{v.location}}</span>
                  </div>
                  <el-input-number v-model="v.num" :min="0" @change="numChange" />
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import {deepCopy} from '@/utils/clone.js'
import coverImg from '@/assets/image/cover.png'
import draggable from "vuedraggable";
import { FwbInput } from "flowbite-vue";
import { nextTick, onMounted, reactive, ref, watch } from "vue";
const props = defineProps({
  containerHeight: { // 容器默认高度
    type: String,
  },
  numIndex: {
    type: Number,
  },
  gridNum: {
    type: Number,
    default: 1,
  },
  parent: {
    type: Number,
    default: 1,
  },
  addWidth: {
    type: String,
    default: "50px",
  },
  addHeight: {
    type: String,
    default: "50px",
  },
  closeSize: {
    type: String,
    default: "16px",
  },
  camera_m_w: {
    type: String,
    default: "20px",
  },
  camera_m_h: {
    type: String,
    default: "14px",
  },
  wabeiSize: {
    type: String,
    default: "22px",
  },
  fullSize: {
    type: String,
    default: "22px",
  },
  IDsize: {
    type: String,
    default: "14px",
  },
  Losize: {
    type: String,
    default: "12px",
  },
  recw: {
    type: String,
    default: "42px",
  },
  rech: {
    type: String,
    default: "19px",
  },
  boxSize: {
    type: String,
    default: "10px",
  },
});
const gridData = ref([]); // 数据量
const createData = (dataNum) => {
  // const videoData = [{id: 1, desc: 'big', name: '', imgUrl: false}];
  const videoData = [{ id: 1, name: "摄像头1",imgUrl: coverImg }];
  const emptyCells = Array.from(
    { length: dataNum - videoData.length },
    (_, index) => ({
      id: index + 1 + videoData[videoData.length - 1].id,
      desc: 'big',
      name: '',
      imgUrl: false
    })
  );
  return (gridData.value = [...videoData, ...emptyCells]);
};
const isMounted = ref(false);
onMounted(() => {
  console.log('props.container',props.containerHeight)
  if (!isMounted.value) {
    createData(props.gridNum);
    // tuozhuai();
    switch (props.parent) {
      case '1':
        gridData.value.forEach(item => {
          item.desc = 'big'
        })
        break;
      case '2':
        gridData.value.forEach(item => {
          item.desc = 'big'
        })
        break;
      case '3':
        gridData.value.forEach(item => {
          item.desc = 'big'
        })
        break;
      case '4':
        gridData.value.forEach(item => {
          item.desc = 'small'
        })
        gridData.value[0].desc = 'big'
        break;
      case '5':
        gridData.value.forEach(item => {
          item.desc = 'small'
        })
        break;
      case '6':
        gridData.value.forEach(item => {
          item.desc = 'small'
        })
        gridData.value[gridData.value.length - 1].desc = 'big'
        break;
      case '7':
        gridData.value.forEach(item => {
          item.desc = 'small'
        })
        gridData.value[0].desc = 'big'
        gridData.value[5].desc = 'big'
        break;
      case '8':
        gridData.value.forEach(item => {
          item.desc = 'small'
        })
        gridData.value[0].desc = 'big'
        break;
      case '9':
        gridData.value.forEach(item => {
          item.desc = 'small'
        })
        break;
      default:
        break;
    }
    console.log('gridData.value', gridData.value)
    isMounted.value = true;
    return false;
  }
});
// 截图
const wabeiBg = ref(false);
const gridMain = ref(null);
const gridHtml = ref(null);
const wabeiPlay = (v) => {
  wabeiBg.value = true;
  setTimeout(() => {
    gridHtml.value = `
    <div>
      <div style=" white-space: nowrap;font-size: ${props.IDsize};color: #ffffff;
      position: absolute;
      left: 50%;
      top: ${v.desc == 'small' ? "40%" : "3%"};
      background-color: black;
      border-radius: 6px;
      padding: 5px 10px;
      z-index: 999;
      transform: translateX(-50%);
      animation: scaleIn 0.2s ease forwards;
      " >Snapshot saved to Playback</div>
      </div>`;
  }, 300);
  setTimeout(() => {
    wabeiBg.value = false;
    setTimeout(() => {
      gridHtml.value = `<div></div>`;
    }, 1500);
  }, 100);
};
const selectGrid = ref(0);
const handleMouseEnter = (num) => {
  selectGrid.value = num;
};
const handleMouseLeave = () => {
  selectGrid.value = 0;
};
const openDrawer = () => {
  drawer.value = true;
};
const camera_mShow = ref(true)
const drawer = ref(false); // 抽屉
watch(drawer, (newValue) => {
  if(!newValue){
    clickIndex.value = 0;
  }
})
const Random = (arr) => {
  return arr[Math.floor(Math.random() * arr.length)];
};
const cameraList = ref([]);
for (let i = 0; i < 3; i++) {
  cameraList.value.push({
    id: i + 1,
    name: "Camera ID",
    location: "Location",
    svg: Random(["camera_m", "camera_s"]),
    num: 0,
  });
}
const numChange = (number) => {
  console.log(value)
}
// 视频相关
const videoShow = ref(0);
const videoMouseEnter = (id) => {
  videoShow.value = id;
};
const videoMouseLeave = () => {
  videoShow.value = 0;
};
const videoRef = ref(null);
const Fullplay = () => {
  drawer.value = false;
  // toggleFullscreen(videoRef.value[0]);
};
const toggleFullscreen = (video) => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    /* Safari */
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    /* IE11 */
    video.msRequestFullscreen();
  }
};
// 格子的点击
const clickIndex = ref(0)
const handleClick = (obj) => {
  clickIndex.value = obj.id
}
// 拖拽
const ending = ref(null)
const dragging = ref(null)
const handleDragStart = (e, item) => {
  dragging.value = item;
}
const handleDragEnd = (e, item) => {
  if (ending.value === dragging.value) {
    return;
  }
  let newItems = [...gridData.value]
  const src = newItems.indexOf(dragging.value);
  const dst = newItems.indexOf(ending.value);
  // console.log('src',src)
  // console.log('dst',dst)
  let srcObj = { desc: gridData.value[src].desc, id: gridData.value[src].id }
  let dstObj = { desc: gridData.value[dst].desc, id: gridData.value[dst].id }
  newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
  newItems[src].desc = srcObj.desc
  newItems[dst].desc = dstObj.desc
  newItems[src].id = srcObj.id
  newItems[dst].id = dstObj.id
  gridData.value = newItems
  console.log('gridData.value',gridData.value)
  nextTick(() => {
    dragging.value = null;
    ending.value = null;
  });
}
const handleDragOver = (e) => {
  e.dataTransfer.dropEffect = "move";
}
const handleDragEnter = (e, item) => {
  e.dataTransfer.effectAllowed = "move";
  ending.value = item;
}

// 树形循环
const activeNames = ref(['1'])
const activeNames2 = ref(['0'])
</script>

<style scoped lang="scss">
@import "./GridMain.scss";
.bofang {
  &::before {
    content: "";
    position: absolute;
    width: 25%;
    height: 50%;
    background: red;
    border-radius: 50%;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }

  &::after {
    content: "REC";
    position: absolute;
    color: red;
    font-size: 0.83rem !important;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
  }
}

.live3d {
  background: rgba(0, 0, 0, 0.5);
  background: rgba(0,0,0,0.1);
}
.live3dhover {
  background: #4b5563;
  color: #ffffff;
}

.minLayout {
  justify-content: center;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  .s4ksvg{
    margin: 0 5px 0;
  }
}

.bgGrid {
  z-index: 111 !important;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.4) 100%) !important;
}

.jtbgGrid {
  z-index: 111 !important;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.8) 100%) !important;
}

.ScreenShots {
  color: #ffffff;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: -30%;
  background-color: black;
  border-radius: 6px;
  padding: 5px 10px;
  z-index: 999;
  transform: translateX(-50%);
}

.ScreenShots2 {
  color: #ffffff;
  opacity: 0;
  position: absolute;
  left: 3%;
  top: -30%;
  background-color: black;
  border-radius: 6px;
  padding: 5px 10px;
  z-index: 999;
  transform: translateX(-50%);
}

.ScreenShotsClass {
  left: 50%;
  animation-duration: 2s;
  animation-name: scaleIn;
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0) translate(-50%);
  }

  50% {
    opacity: 1;
    transform: scale(1) translate(-50%);
  }

  100% {
    opacity: 0;
    transform: scale(0) translate(-50%);
  }
}

.svgSure {
  color: #3f83f8;
}

.content {
  color: #ffffff;
  font-size: 2rem;

  #input {
    color: #9ca3af;
    font-size: 1.13rem;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: solid 2px #163e8d;

    &:focus {
      outline: none;
      box-shadow: inset 0 0;
    }
  }
}

.svgSelect {
  color: var(--logo);
}

.svgAdd {
  color: #3f83f8;
}

.selectBox1 {
  transition: all 0.3s;

  &:hover {
    border: solid #3f83f8 2px;
    transform: scale(1.01);
  }
}

.selectBox {
  transition: all 0.3s;

  &:hover {
    border: solid #3f83f8 2px;
    transform: scale(1.01);
  }
}

:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.3);
}

:deep(.el-drawer) {
  width: 21% !important;
  background-color: var(--theme);
  border-left: solid var(--grid) 1px;
}
:deep(.el-input-number){
  width: 105px;
  height: 30px;
  position: absolute;
  // border: solid red;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  .el-input__wrapper{
    border: none !important;
    background: var(--theme) !important;
    box-shadow: 0 0 0 0;
    // box-shadow: 0 0 0 1px #374151 inset;
  }

}
:deep(.el-input-number__decrease.is-disabled){
  background: var(--numInputDisabe);
  border: solid var(--numInputDisabe) 1px;
  svg{
    color: var(--grid);
  }
  // --el-input-text-color

}
:deep(.el-input-number__decrease){
  background: var(--numInputDecrease);
  border: solid var(--numInputDecrease) 1px;
  svg{
    color: var(--bule-font);
  }
}
:deep(.el-input-number__increase){
  background: var(--numInputDecrease);
  border: solid var(--numInputDecrease) 1px;
  svg{
    color: var(--bule-font);
  }
}
:deep(.el-input__inner[type=number]){
  color: var(--theme-font-color);
  font-size: 1.16rem;
  &:focus{
    box-shadow: none;
  }
  // @if &:has(.one) {
  //   color: red;
  // } @else {
  //   color: blue;
  // }
}
#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: #ffffff;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}
.s4ksvg{
  margin: 0 10px 5px;
}
:deep(.el-collapse){
  --el-collapse-border-color: rgba(0,0,0,0);
}
:deep(.el-collapse-item__header){
  background: rgba(0,0,0,0);
  height: 30px;
  font-size: 1.16rem;
  padding-left: 16px;
  color: var(--theme-font-color);
  font-family: SemiBold;
  .el-icon{
    margin-right: 16px;
    color: var(--theme-font-desc-color);
  }
}
:deep(.el-collapse-item__wrap){
  background: rgba(0,0,0,0);
}
:deep(.el-collapse-item__content){
  background: rgba(0,0,0,0);
  padding-left: 16px;
  padding-bottom: 0;
}
@media screen and (min-width: 2560px) {
  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 45px;
    }
  }
  .s4ktext{
    transform: scale(2);
    margin: 7px 0;
  }
  :deep(.el-collapse-item__header){
    height: 40px;
    padding-left: 21.3px;
    .el-icon{
      margin-right: 21.3px;
    }
  }
  :deep(.el-collapse-item__content){
    padding-left: 21.3px;
  }
}
@media screen and (min-width: 3840px) {
  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 100px;
    }
  }
  .s4ktext{
    transform: scale(2);
    margin: 7px 0;
  }
  :deep(.el-input-number__decrease){
    width: 40px;
    height: 40px;
  }
  :deep(.el-input-number__increase){
    width: 40px;
    height: 40px;
  }
  :deep(.el-collapse-item__header){
    height: 60px;
    padding-left: 32px;
    .el-icon{
      margin-right: 32px;
    }
  }
  :deep(.el-collapse-item__content){
    padding-left: 32px;
  }
  :deep(.el-input__inner[type=number]){
    margin-top: 10px;
  }
}

.list {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.list::-webkit-scrollbar {
  width: 5px;
}

.list::-webkit-scrollbar-thumb {
  background-color: #6b7280;
  border-radius: 10px;
}

.list::-webkit-scrollbar-track {
  background-color: #4c555f;
  border-radius: 10px;
}
</style>